<template>
    <view class="class">
        <view class="date_select">
            <lxCalendar @change="change"></lxCalendar>
        </view>
        <u-divider text="预约管理"></u-divider> 
        <view class="class_list">
            <view class="class_list_item" v-for="item in list" :key="item.subscribeId">
                <img :src="item.traineeAvatar" alt="">
                <view class="content">
                    <view class="top">
                        <view class="name bt">姓名：<text>{{ item.traineeName }}</text></view>
                        <view class="date bt">
                           预约时段：<text>10:00 ~ 17:00 </text>
                        </view> 
                        <view class="date bt">
                            状态：<text>{{ item.state | stateName }}</text>
                        </view>
                    </view>
                    <view class="bottom">
                        <u-button type="primary" text="确认" @click="onConfirm(item)" size="small" class="bot"></u-button>
                        <u-button type="warning" text="取消" size="small" class="bot" @click="onCancel(item)"></u-button> 
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {confirmList, confirm} from '../../common/api'
import lxCalendar from '../../components/lx-calendar/lx-calendar.vue'
export default {
    components: {
        lxCalendar,
    },
    data() {
        return {
            list: [],
            userData: uni.getStorageSync('userData'), //获取用户信息
        }
    },
    filters: {
        stateName: function (value) {
            if (value === 0) {
                return '待确认'
            } else if (value === 1) {
                return '已确认'
            } else if (value === 2) {
                return '已取消'
            } else if (value === 3) {
                return '已完成'
            }
            return '未知状态'
        }
    },
    onLoad() {	
        this.getConfirmList()
    },
    methods: {
        change(e) {
            console.log(e);
        },
        async getConfirmList() {
            try {
                let res = await confirmList(this.userData.user.coachId)
                console.log(res, 1111);
                this.list = res
            } catch (error) {
                console.error('获取预约列表失败:', error)
                uni.$u.toast('获取预约列表失败，请稍后重试')
            }
        },
        async onConfirm(o) {
            try {
                console.log(o, 1111);
                await confirm(o.coachId, o.traineeId)
                this.getConfirmList()
                uni.$u.toast('确认成功')
            } catch (error) {
                console.error('确认预约失败:', error)
                uni.$u.toast('确认预约失败，请稍后重试')
            }
        },
        onCancel(item) {
            // 这里可以添加取消预约的接口调用，目前仅做提示
            uni.$u.toast('取消成功！')
            // 如果需要调用接口取消预约，可以参考 onConfirm 方法添加接口调用逻辑
            // 例如：
            // try {
            //     await cancelReservation(item.coachId, item.traineeId)
            //     this.getConfirmList()
            //     uni.$u.toast('取消成功！')
            // } catch (error) {
            //     console.error('取消预约失败:', error)
            //     uni.$u.toast('取消预约失败，请稍后重试')
            // }
        }
    }
}
</script>

<style lang="scss" scoped>
.class {
    .class_list {
        margin: 32rpx;
        padding-bottom: 32rpx;

        .class_list_item {
            display: flex;
            padding: 26rpx;
            border-radius: 24rpx;
            background: #f5f5f5;
            margin-bottom: 32rpx;

            img {
                width: 220rpx;
                height: 220rpx;
                border-radius: 20rpx;
            }

            .content {
                width: calc(100% - 240rpx);
                margin-left: 24rpx;
                display: flex;
                flex-flow: column;
                justify-content: space-between;

                .top {
                    view {
                        font-size: $uni-font-size-small;

                        text {
                            color: $uni-color-type1;
                        }
                    }

                    .bt {
                        margin-bottom: 20rpx;
                    }
                }

                .bottom {
                    display: flex;

                    .bot {
                        width: 120rpx; /* 修改按钮宽度 */
                        margin-right: 10rpx; /* 添加按钮间距 */
                    }
                }
            }
        }
    }
}
</style>